<template>
  <el-table
    ref="table"
    v-bind="$attrs"
  >
    <template v-for="item in tableColumns" :key="item.key">
      <!-- 通过v-bind透传item中设置的属性 -->
      <el-table-column
        v-bind="item"
      >
        <template v-if="item.render" #default="params">
          <yfRender :toRender="item.render" :params="params" />
        </template>
        <template v-else-if="item.slot" #default="params">
          <slot :name="item.slot" v-bind="params" />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup lang="ts">
import { yfRender } from '@/components';
import { YfTableColumn, formatTableColumn } from './table';
import { ref } from 'vue';


/* ****** 组件定义 ****** */
const props = defineProps<{ columns: YfTableColumn[] }>();

defineEmits<{
  (e: 'btnClick', action: string): string
}>();

const table = ref(), tableColumns = formatTableColumn(props.columns)

/* ****** 向外暴露的属性 ****** */
defineExpose({
  table
});
</script>

<style lang="scss" scoped>

</style>
